<template>
	<view>
		<view class="navlist">
			<view v-for="(item,index) in navlist" :key="item.id" :class="{
				'li': true,
				'okli': item.id === navlistNum
			}" @click="updateclass(item.id)">
				{{ item.name }}
			</view>
		</view>
		<view class="" v-show="navlistNum === 0">
			<view  class="paihangli"  v-for="(item,index) in peoplelist" :key="index">
				<view class="">
					{{ index+1 }}
				</view>
				<view class="">
					{{item.name}}
				</view>
				<view class="">
					{{item.time}}
				</view>
			</view>
		</view>
		<view class="" v-show="navlistNum === 1">
			<view class="paihangli"  v-for="(item,index) in peoplelist1" :key="index" >
				<view class="">
					{{ index+1 }}
				</view>
				<view class="">
					{{item.name}}
				</view>
				<view class="">
					{{item.time}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"tap-list",
		data() {
			return {
				navlist: [
					{
						id: 0,
						name: '周榜'
					},
					{
						id: 1,
						name: '月榜'
					}
				],
				navlistNum: 0,
				peoplelist:[
					{
						name:"小明",
						time:"8h"
					},
					{
						name:"小红",
						time:"7h"
					},
					{
						name:"小强",
						time:"6h"
					},
					{
						name:"花花",
						time:"6h"
					},
					{
						name:"东东",
						time:"5h"
					},
					{
						name:"huy",
						time:"5h"
					},
					{
						name:"bob",
						time:"5h"
					},
					{
						name:"alice",
						time:"5h"
					},
					{
						name:"alo",
						time:"3h"
					}
				],
				peoplelist1:[
					{
						name:"小明",
						time:"30h"
					},
					{
						name:"小红",
						time:"28h"
					},
					{
						name:"小强",
						time:"28h"
					},
					{
						name:"花花",
						time:"20h"
					},
					{
						name:"东东",
						time:"17h"
					},
					{
						name:"huy",
						time:"16h"
					},
					{
						name:"bob",
						time:"15h"
					},
					{
						name:"alice",
						time:"13h"
					},
					{
						name:"PopLL",
						time:"10h"
					}
				]
			};
		},
		methods: {
			updateclass(id) {
				this.navlistNum = id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navlist{
		display: flex;
		justify-content: space-evenly;
		padding: 16rpx;
		margin-top: 20rpx;
	}
	.li{
		padding: 5rpx;
		font-size: 28rpx;
	}
	.okli{
		transform: scale(1.1);
		border-bottom: 2px solid #ee93a0;
	}
	.paihangli{
		display: flex;
		justify-content: space-around;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #e1e1e1;
	}
</style>
